import React, { useEffect, useState } from 'react';
import { Tabs ,Button, Form, Input, Select, Space } from 'antd';
const { Option } = Select;
const layout = {
  labelCol: {
    span:4,
  },
  wrapperCol: {
    span: 16,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 4,
    span: 16,
  },
};
const onChange = (key) => {
  console.log(key);
};
const items = [
  {
    key: '1',
    label: '基本资料',
    
  },
  {
    key: '2',
    label: '修改密码', 
  }
];
const UserForm = (userData) =>{
    const [user, setUser] = useState(userData?.data);
    const [form] = Form.useForm();

    useEffect(() => {
        setUser(userData.data) 
        form.setFieldsValue({
           ... userData.data

        })
    }, [userData.data,form])
    
    const onFinish = (values) => {
      console.log(values);
    };
    const onReset = () => {
      form.resetFields();
    };
    const onGenderChange = (value) => {
      switch (value) {
        case 0:
          form.setFieldsValue({
            nickname: `*${form.getFieldValue('nickname')}*`
          });
        break;
       
      }
    };
  return (
   


    <div>
       <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
    
      <Form {...layout}  form={form} name="control-hooks" onFinish={onFinish} style={{  maxWidth: 600,  }}>
        <Form.Item  name="nickname"  label="用户昵称" rules={[ {  required: true, }, ]} >
          <Input />
        </Form.Item>
        <Form.Item  name="mobile"  label="手机号码" rules={[ {  required: true, }, ]} >
          <Input />
        </Form.Item>
        <Form.Item  name="email"  label="用户邮箱" rules={[ {  required: true, }, ]} >
          <Input />
        </Form.Item>
        <Form.Item name="sex"  label="性别"  rules={[ { required: true,  }]} >
          <Select
            placeholder="Select a option and change input text above"
            onChange={onGenderChange}
            allowClear
          >
            <Option value={1}>男生</Option>
            <Option value={2}>女生</Option>
            <Option value={0}>保密</Option>
          </Select>
      </Form.Item>
     
      <Form.Item {...tailLayout}>
        <Space>
          <Button type="primary" htmlType="submit">
            提交
          </Button>
          <Button htmlType="button" onClick={onReset}>
            重置
          </Button>
         
        </Space>
      </Form.Item>
    </Form>
    </div>
  )
}
export default UserForm;